﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Input, Number Input, Currency Input, Percentage Input, Floating-Point Input, Decimal Input, jqxNumberInput" />
    <meta name="description" content="The jqxNumberInput widget allows you to edit currency, percentages and any type of numeric data. The edited data can 
    be presented in various formats. Other built-in capabilities are customizable number of digits and decimal digits, currency symbol's string and position, group and 
    decimal separator character" />
    <title id='Description'>In this demo is demonstrated how to use the number input's API.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();

            // Create jqxNumberInput
            $("#numericInput").jqxNumberInput({ width: '250px', height: '25px', symbol: "$", min: 0, theme: theme, spinButtons: true });

            // Settings
            $('#spinbuttons').jqxCheckBox({ checked: true, theme: theme });
            $('#spinbuttons').bind('change', function (event) {
                var checked = event.args.checked;
                $("#numericInput").jqxNumberInput({ spinButtons: checked });
            });

            $('#leftbutton').jqxRadioButton({ checked: true, theme: theme });
            $('#rightbutton').jqxRadioButton({theme: theme});
            $('#rightbutton').bind('checked', function () {
                $("#numericInput").jqxNumberInput({ symbolPosition: 'right' });
            });
            $('#leftbutton').bind('checked', function () {
                $("#numericInput").jqxNumberInput({ symbolPosition: 'left' });
            });

            var symboltypes = ["$", "%","€","None"];
            $('#symboltype').jqxDropDownList({ source: symboltypes, autoDropDownHeight: true, selectedIndex: 0, width: 60, height: 20, theme: theme });
            $('#symboltype').bind('select', function (event) {
                var index = event.args.index;
                if (index == 3) {
                    $("#numericInput").jqxNumberInput({ symbol: '' });
                }
                else {
                    $("#numericInput").jqxNumberInput({ symbol: symboltypes[index] });
                }
            });

            var digits = ["1", "2", "3", "4", "5", "6", "7", "8"];
            var decimaldigits = ["0", "1", "2", "3", "4"];
            $('#decimaldigits').jqxDropDownList({ selectedIndex: 2, source: decimaldigits, autoDropDownHeight: true, width: 60, height: 20, theme: theme });
            $('#digits').jqxDropDownList({ selectedIndex: 7, source: digits, autoDropDownHeight: true, width: 60, height: 20, theme: theme });

            $('#decimaldigits').bind('select', function (event) {
                var index = event.args.index;
                $("#numericInput").jqxNumberInput({ decimalDigits: decimaldigits[index] });
            });

            $('#digits').bind('select', function (event) {
                var index = event.args.index;
                $("#numericInput").jqxNumberInput({ digits: digits[index] });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style='margin-top: 3px;' id='numericInput'>
        </div>
        <div>
            <div style="float: left;">
                <div style="width: 170px; margin-top: 20px;" id='spinbuttons'>
                    Show Spin Buttons</div>
                <div style="margin-top: 10px;">
                    Symbol Position</div>
                <div style="margin-top: 5px;" id='leftbutton'>
                    Left</div>
                <div style="margin-top: 5px;" id='rightbutton'>
                    Right</div>
            </div>
            <div style="margin-left: 30px; float: left;">
                <div style="margin-top: 20px; margin-bottom:10px;">
                    Symbol</div>
                <div id="symboltype"></div>
                <div style="margin-top: 10px; margin-bottom: 10px;">
                    Decimal Digits</div>
                <div id="decimaldigits"></div>
                <div style="margin-top: 10px; margin-bottom: 10px;">
                    Digits</div>
                <div id="digits"></div>           
            </div>
        </div>
    </div>
</body>
</html>
